/* 
  学习目标：性能优化-减轻state
*/
import React from 'react';
export default class App extends React.Component {
  timerId = -1;

  componentDidMount() {
    this.timerId = setInterval(() => {
      console.log('定时器在执行');
    }, 100);
  }

  componentWillUnmount() {
    clearInterval(this.timerId);
  }

  state = {
    timerId: -1,
    count: 0,
  };

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h1>数量： {this.state.count}</h1>
        <button onClick={this.handleClick}>点我修改数量</button>
        <Footer></Footer>
      </div>
    );
  }
}

class Footer extends React.Component {
  render() {
    console.log('Footer的render被中重新计算了');
    return <div>我是Footer</div>;
  }
}
